<template>
  <div class="container setting">
    <div class="tig mar-b--6">点击右侧按钮，查看您设置后的效果~ <div class="check" @click="$pt.reLaunch({ url: '/pages/home/main' })">查看效果</div></div>
    <div class="tips-t pad-t-10 pad-b-10 pad-l-12 pad-r-12">温馨提示：设置后让顾客更了解您的店铺，不填的字段则不显示。</div>
    <div class="panel panel-box pad-t-5 pad-b-5">
      <div class="flex v-align-c div-input mar-r-10">
        <div class="width-90 mar-r-5">店主昵称</div>
        <div class="flex-item">
          <div class="flex v-align-c">            
            <div class="flex-item v-align-c s-input-bar">
              <input placeholder="请输入店主昵称" class="flex-item font-14" maxlength="8" v-model="memberStore.nickname" />
            </div>            
          </div>
        </div>
      </div>
      <div class="flex v-align-c div-input mar-r-10" @click="$pt.navigateTo({url:'/pages/home/shop-setting/avatar/main'})">
        <div class="text-bar flex v-align-c pad-t-3 pad-b-3">
          <div class="width-90 mar-r-5">店主头像</div>
          <div class="flex-item">
            <template v-if="memberStore.avatar !== 'https://veekrayimg.joinsun.vip/head-portrait.png'">
              <img v-if="memberStore.avatar" class="avatar mar-l-8" :src="memberStore.avatar"/>
            </template>
          </div>
          <span class="font-12 text-gray" v-if="memberStore.avatar === 'https://veekrayimg.joinsun.vip/head-portrait.png'">未设置</span>
          <icon class="iconfont icon-arrow-right font-12 mar-l-6 mar-b--1 text-gray-less"></icon>
        </div>
      </div>
    </div>
    <div class="tips-t pad-t-10 pad-b-10 pad-l-12 pad-r-12">温馨提示：设置顾客取货的门店信息，不填的字段则不显示。</div>
    <div class="panel panel-box pad-t-5 pad-b-5">
      <div class="flex v-align-c div-input mar-r-10">
        <div class="width-90 mar-r-5">门店名称</div>
        <div class="flex-item">
          <div class="flex v-align-c">            
            <div class="flex-item v-align-c s-input-bar">
              <input placeholder="请输入门店名称" class="flex-item font-14" maxlength="8" v-model="memberStore.storeName" />
            </div>            
          </div>
        </div>
      </div>
      <div class="flex v-align-c div-input mar-r-10">
        <div class="text-bar flex v-align-c pad-t-3 pad-b-3">
          <div class="width-90 mar-r-5">营业时间</div>
          <div class="flex-item font-14 pad-l-8 height-22"
            :class="businessHour ? '' : 'default'" @click="showMonthPicker">
            {{businessHour ? businessHour : '请选择营业时间'}}</div>
        </div>
      </div>
      <div class="flex v-align-c div-input mar-r-10">
        <div class="width-90 mar-r-5">联系电话</div>
        <div class="flex-item">
          <div class="flex v-align-c">            
            <div class="flex-item v-align-c s-input-bar">
              <input placeholder="请输入门店联系电话" class="flex-item font-14"
                maxlength="11" type="number" v-model="memberStore.storePhone" />
            </div>            
          </div>
        </div>
      </div>
      <div class="flex v-align-c div-input mar-r-10">
        <div class="width-90 mar-r-5">门店地址</div>
        <div class="flex-item">
          <div class="flex v-align-c">            
            <div class="flex-item v-align-c s-input-bar" @click="chooseLocation">
              <div class="address-textarea font-14" :class="storeAddress ? '' : 'default'">
                {{ storeAddress ? storeAddress : '点击设置门店导航地址' }}</div>
              <div class="pad-10">
                <img v-if="fileSpace" mode="widthFix" class="width-13 height-15"
                  :src="fileSpace + '/images/local-seticon.png'"/>
              </div>
            </div>            
          </div>
        </div>        
      </div>
    </div>
    <div class="mar-10 pad-t-10" @click="saveMemberShopSetting">
      <span class="p-button" :style="{backgroundColor: globalStyle.color2, color: globalStyle.styleType === 10 ? globalStyle.color4 : '#fff'}">
        保存
      </span>
    </div>
    <div class="pad-t-10"></div>
    <van-popup
      :show="isShowPicker"
      position="bottom"
      @close="onMonthClose"
    >
      <van-picker
        show-toolbar
        :columns="pickerArray"
        @cancel="onMonthClose"
        @confirm="onMonthConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
  import {
    listHomeGoods
  } from '@/api/home'
  import {
    getMemberShopSetting,
    saveMemberShopSetting
  } from '@/api/shop'

  export default {
    data() {
      return {
        memberInfo: {
          memberDetails: {}
        },
        memberStore: {},
        storeAddress: '',
        businessHour: '',
        listUserGoods: [],
        isShowPicker: false,
        pickerArray: [
          {
            text: 'start-hour',
            values: []
          },
          {
            text: 'start-minute',
            values: []
          },
          {
            text: 'line',
            values: '-'
          },
          {
            text: 'end-hour',
            values: []
          },
          {
            text: 'end-minute',
            values: []
          }
        ],
        globalStyle: {}
      }
    },
    onUnload() {
      console.log('onUnload')
      this.$pt.removeStorageSync('storeInfo')
    },
    onLoad() {
      this.pickerArray.forEach(item => {
        if (item.text === 'start-hour' || item.text === 'end-hour') {
          for (var a = 0; a <= 24; a++) {
            if (a < 10) {
              a = '0' + a
            }
            item.values.push(a)
          }
        }
        if (item.text === 'start-minute' || item.text === 'end-minute') {
          item.values = ['00', '30']
        }
      })
    },
    onShow() {
      let getAppInfo = this.$pt.getStorageSync('appInfo')
      this.globalStyle = getAppInfo.style
      this.getListUserGoods()
      let storeLogo = this.$pt.getStorageSync('storeLogo')
      if (storeLogo) {
        this.memberStore.avatar = storeLogo
      }
      let storeInfo = this.$pt.getStorageSync('storeInfo')
      if (!this.getMethodInitData('pages/personal/shop-setting/main', 'getMemberShopSetting') || storeInfo) {
        this.businessHour = ''
        this.getMemberShopSetting()
      }
    },
    methods: {
      showMonthPicker() {
        this.isShowPicker = true
      },
      onMonthClose() {
        this.isShowPicker = false
      },
      onMonthConfirm(e) {
        this.isShowPicker = false
        let values = e.mp.detail.value
        values = values.join(':')
        this.businessHour = values.substring(0, 5) + '-' + values.substring(8, 13)
      },
      // 店铺推荐
      getListUserGoods() {
        listHomeGoods(this.getMemberId, this.getCustomerId).then((response) => {
          if (response.isError) return
          this.listUserGoods = []
          response.data.forEach(item => {
            this.listUserGoods.push(item)
          })
        }).catch(() => {
        })
      },
      getMemberShopSetting() {
        getMemberShopSetting(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.memberStore = response.data
          if (this.memberStore.businessHour) {
            this.businessHour = this.memberStore.businessHour
          }
          if (this.memberStore.storeAddress) {
            this.storeAddress = this.memberStore.storeAddress
          }
        }).catch(() => {
        })
      },
      saveMemberShopSetting() {
        // 3.0.1去除佣金设置
        // if (this.getStoreCardFlag === 1) {
        //   if (this.memberStore.maxProfit * 1 < 0 || this.memberStore.maxProfit * 1 > 100) {
        //     this.$utils.showToast({ title: '收益范围必须大于0且小于100' })
        //     return
        //   }
        // }
        if (!this.$utils.phone(this.memberStore.storePhone)) {
          this.$utils.showToast({ title: '请输入正确的联系电话' })
          return
        }
        this.memberStore.memberId = this.getCustomerId
        this.memberStore.businessHour = this.businessHour
        this.memberStore.storeAddress = this.storeAddress
        saveMemberShopSetting(this.memberStore).then((response) => {
          if (response.isError) return
          this.$pt.removeStorageSync('storeLogo')
          this.$utils.showToast({ title: '修改成功！' })
        }).catch(() => {
        })
      },
      chooseLocation() {
        const that = this
        that.$pt.chooseLocation({
          success: (res) => {
            that.$pt.removeStorageSync('storeInfo')
            that.storeAddress = res.address
            that.memberStore.latitude = res.latitude
            that.memberStore.longitude = res.longitude
          },
          fail: function(err) {
            if (err.errMsg.indexOf('cancel') !== -1) return
            that.$pt.removeStorageSync('storeInfo')
            that.$pt.showModal({
              content: '需要访问你的位置',
              success(res) {
                if (res.confirm) {
                  that.$pt.openSetting()
                } else if (res.cancel) {
                  console.log(err)
                }
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .default{
    color: #808080;
  }
  .avatar{
    border-radius: 50px;
    width: 22px;
    height: 22px;
  }
  .container{
    background: #f6f6f6;
    min-height: calc(100vh);
  }
  .text-bar{
    width: 100%;
  }
  .text-gray{
    color: #666666;
  }
  .text-gray-less{
    color: #999999;
  }
  .tig {
    padding-left: 20px;
    padding-right: 8px;
    height: 30px;
    background: #fdc807;
    color: #333333;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 6px solid #f6f6f6;
    .check {
      width: 85px;
      height: 23px;
      font-size: 12px;
      color: #fff;
      background: #333333;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .uncheck {
      width: 85px;
      height: 23px;
      font-size: 12px;
      color: #fdfdfd;
      background: #cccccc;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
  .border-b{
    border-bottom: #f1f1f1 1px solid;
  }
  .panel-box{
    border-radius: 5px;
    box-shadow: none;
    border-top: none;
    border-bottom: none;
  }
  .p-button{
    display: block;
    border-radius: 100px;
    height: 46px;
    line-height: 46px;
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    text-align: center;
    // background: linear-gradient(to right, #fed801, #fcc508);
  }
  .tips-t{
    color: #999999;
    font-size: 13px;
  }
  &.address-textarea {
    width: 190px!important;
    font-size: 14px;
  }
  .s-input-bar{
    // border: #c5c5c5 1px solid;
    // border-radius: 8px;
    font-size: 12px;
    padding: 0 0 0 8px;
    overflow: hidden;
    input{
      width: 70%!important;      
    }
    .per-span{
      text-align: right;
      display: block;
      height: 30px;
      line-height: 30px!important;
      padding: 0 8px 0 0;
      margin-right: 0px;
    }
  }
  .tips-content{
    line-height: 1.8;
  }
  .font-gray{
    color: #999999!important;
  }
  .panel-box{
    h2{
      &:before{
        content: '';
        display: inline-block;
        vertical-align: top;
        width: 5px;
        height: 15px;
        background: #f8c400;
        margin: 3px 10px 0 6px;
      }
    }
  }
  .setting input {
    width: 100%;
  }
  .div-input {
    border-bottom: #f1f1f1 1px solid;
    margin-left: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .div-input:last-child {
    border-bottom: 0;
  }
</style>
